<template>
	<view class="video-item-wrap article-item-wrapper" @click="toDetail">
		<view class="content-desc">
			<text>{{ record.desc }}</text>
		</view>
		<view class="mask-image-wrap">
			<view class="mask-image inset">
				<image :src="record.image" mode="aspectFill" class="full"></image>
			</view>
			<view class="play-btn">
				<image :src="sourceUrl + '/kaishi1.png'" class="begin-icon" mode="aspectFill"></image>
			</view>
		</view>
		<view class="author-wrapper">
			<image :src="record.author_img" class="user-avatar" mode="aspectFill"></image>
			<text class="user-name">{{ record.author }}</text>
			<text class="action-text">{{ record.collect_num }}收藏</text>
			<text class="action-text">{{ record.like_num }}赞</text>
		</view>
	</view>
</template>

<script>
	import props from './props.js'
	export default {
		methods: {
			toDetail() {
				let url = '/pages-bundle/video-detail/video-detail?id=' + this.record.id
				if (this.record.__bindEvent) {
					url += '&event=1'
				}
				uni.navigateTo({ url })
			},
		},
		props,
	}
</script>

<style lang="scss" scoped>
	.video-item-wrap {
		.mask-image-wrap {
			width: 100%;
			height: 332rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: 16rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.mask-image {
				position: absolute;
			}

			.play-btn {
				width: 90rpx;
				height: 90rpx;
				background: rgba(29, 33, 41, 0.6);
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;

				.begin-icon {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}
</style>